<template>
  <div class="concat-service">
    <div class="flex" style="justify-content: flex-start">
      <div class="create-btn flex" @click="createDialog = true">创建工单</div>
      <div class="service-btn flex" @click="openOnline">在线客服</div>
    </div>
    <div class="buy-log-h4">工单记录</div>
    <div class="buy-table" style="margin:20px 0">
      <div class="buy-header flex">
        <div class="header-item flex">序号</div>
        <div class="header-item flex">工单ID</div>
        <div class="header-item flex">工单标题</div>
        <div class="header-item flex" style="padding: 0 20px">创建时间</div>
        <div class="header-item flex">受理状态</div>
        <div class="header-item flex">操作</div>
      </div>
      <el-form v-loading="loading">
        <div v-if="tableLength > 0">
          <div
            class="buy-body flex"
            v-for="(item, index) in tableList"
            :key="'table' + index"
          >
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ index + 1 }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ item.root_id }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ item.title }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59;padding:0 20px'
                  : 'padding:0 20px'
              "
            >
              {{ item.datetime }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              <div class="flex" style="justify-content: flex-start">
                <div
                  class="node-item-tip flex"
                  style="border: 1px solid #07be2a; color: #07be2a; width: 70px"
                  v-if="item.status == 2"
                >
                  技术已回复
                </div>
                <div
                  class="node-item-tip flex"
                  style="border: 1px solid #d0d0d0; color: #d0d0d0"
                  v-if="item.status == 1"
                >
                  处理中
                </div>
                <div
                  class="node-item-tip flex"
                  style="border: 1px solid #fe2627; color: #fe2627"
                  v-if="item.status != 2 && item.status != 1"
                >
                  已关闭
                </div>
              </div>
            </div>
            <div
              :class="'body-item flex isChoose'"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              <span @click="showChat(item.root_id)" style="cursor:pointer">回复工单</span>
            </div>
          </div>
        </div>
        <div v-else class="no-data flex">暂无记录</div>
      </el-form>
    </div>
    <div class="flex">
      <div>
        总 <span class="chooseColor">{{ total }}</span> 条记录
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pages.current"
        :page-size="pages.size"
        @current-change="currentChange"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="创建工单"
      center
      width="520px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="createDialog"
      :before-close="dialogCancle"
      append-to-body
    >
      <h4 style="color: #fff; margin: 20px 0">创建工单</h4>
      <el-form
        v-loading="loading"
        ref="dataform"
        :model="dataForm"
        :rules="dataRule"
        label-width="80px"
      >
        <el-form-item label="工单标题" prop="title">
          <el-input
            placeholder="请输入工单标题"
            v-model="dataForm.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单描述" prop="content">
          <el-input
            :rows="4"
            type="textarea"
            placeholder="请输入工单描述"
            v-model="dataForm.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-btns cursor flex">
        <div class="dialog-cancel flex" @click="dialogCancle">关闭</div>
        <div class="dialog-confirm chooseColor flex" @click="dialogConfirm">
          提交
        </div>
      </div>
    </el-dialog>
    <div class="chat-dialog" v-if="chatDialog">
      <chat ref="chat" @closeChat="closeDialog"></chat>
    </div>
  </div>
</template>

<script>
import {ticketlist, addticket} from "../../utils/api";
import chat from "./chat.vue";
const BrowserWindow = require("electron").remote.BrowserWindow;
export default {
  components: { chat },
  data() {
    return {
      loading: false,
      createDialog: false,
      chatDialog: false,
      pages: {
        current: 1,
        size: 9,
      },
      dataForm: {
        title: "",
        content: "",
      },
      dataRule: {
        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入工单描述", trigger: "blur" },
        ],
      },
      total: 8,
      tableLength: 8,
      tableList: [],
    };
  },
  methods: {
    currentChange(v) {
      this.pages.current = v;
      this.handTicketList();
    },
    // 确定
    dialogConfirm() {
      this.$refs["dataform"].validate((valid) => {
        if (valid) {
          console.log("data = " + JSON.stringify(this.dataForm));
          addticket(this.dataForm)
            .then((res) => {
              this.loading = false;
              if (res.data.ret == 1) {
                this.$message.success("提交成功");
                this.dialogCancle();
                this.handTicketList();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    //取消
    dialogCancle() {
      (this.dataForm = {
        title: "",
        content: "",
      }),
        (this.createDialog = false);
    },
    showChat(id) {
      this.chatDialog = true;
      this.$nextTick(() => {
        this.$refs["chat"].handTicketView(id);
      });
    },
    closeDialog(){
      this.chatDialog = false
      console.log('关闭')
    },
    handTicketList() {
      this.loading = true;
      ticketlist(this.pages.current, this.pages.size)
        .then((res) => {
          this.loading = false;
          if (res.data.ret == 1) {
            this.tableList = res.data.data.ticket_list;
            this.tableLength = this.tableList.length;
            this.total = res.data.data.ticket_list_total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    openOnline(){
      let onlineUrl = this.$localStore.get("onlineUrl")
      if(onlineUrl == null){
        return false;
      }
      let win = new BrowserWindow(
          {
            width: 420,
            height: 680,
            show: false,
            resizable: false,
            minimizable: false,
            webPreferences: {
              nodeIntegration: true
            }
          });
      win.on("closed", function() {
        win = null;
      });
      win.setTitle("在线客服")
      win.loadURL(onlineUrl);
      win.show();
    },
  },
  mounted() {
    this.handTicketList();
  },
};
</script>

<style>
.concat-service {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.buy-log-h4 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #b7b7b7;
  margin-top: 20px;
}
.create-btn {
  width: 100px;
  height: 40px;
  background: #efa21d;
  border-radius: 10px;
  color: #fff;
  margin-right: 22px;
  cursor: pointer;
}
.service-btn {
  width: 100px;
  height: 40px;
  background: #07be2a;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
.body-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.isChoose {
  color: #09d0ce;
}
.chat-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 2001;
  padding-top: 45px;
  background: rgba(0,0,0,.6);
}
.el-form-item__label{
  color: white;
}
</style>